import logo from '@/assets/logo.png'
import bg from '@/assets/bg.jpg'
import lgbg from '@/assets/lgbg.jpg'
import type { FormProps } from 'antd';
import { Button, Form, Input } from 'antd';
import "./index.scss"
import { LockOutlined, UserOutlined } from '@ant-design/icons';
// import http from '@/utils/http/http.ts'
// import http from '../../utils/http/http'
import { useEffect } from 'react';
import { useState } from 'react'
// 引用封装的API
import {login} from '@/api/users'

// 切片
import {setToken} from '@/store/login/authSlice'
import {useDispatch} from 'react-redux'

// 跳转
import { useNavigate } from 'react-router-dom'
const Login = ()=>{
    type FieldType = {
        username?: string,       
        password?: string,
        remember?: string,
    }
    const [loading,setLoading] = useState<boolean>(false)
    useEffect(()=>{
        // 1 基础的形式
        // http({
        //     method:'post',
        //     url:'/login',
        //     data:{
        //         username:'dkj',password:123456
        //     }
        // }).then(res=>{
        //     console.log('请求res',res);
            
        // }).catch(err=>{
        //     console.log('err',err);
        // })
        // 2 封装的形式
        // login({a:1,b:2})  这就是ts的好处
        // login({username:'dkj',password:'123456'}) // 
    },[])
    const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
        // console.log('Success:', values);
    };
    const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
        // console.log('Failed:', errorInfo);
    };

    // 登录
    const [form] = Form.useForm()

    const navigate = useNavigate()

    const dispatch = useDispatch()
    const handleLogin = ()=>{
        // console.log('form',form)
        form.validateFields().then( async res=>{
            setLoading(true)
            const {data:{token,username}}= await login(res)
            setLoading(false)
            dispatch(setToken(token))
            sessionStorage.setItem('username',username)
            // 直接替代掉之前的记录
            navigate('/',{replace:true})
        }).catch(err=>{
            console.log('err',err)
            setLoading(false)
        })
    }
    return <div className="login" style={{backgroundImage:`url(${bg})`}}>
        <div className="lgbg" style={{backgroundImage:`url(${lgbg})`}}>
            <div className="part">
                <div className="title">
                    <div className="logo">
                        <img src={logo} width={100} alt="无" />
                    </div>
                    <h1>智慧园区管理平台</h1>

                    <Form
                        form={form}
                        name="basic"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 16 }}
                        style={{ maxWidth: 600 }}
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                    >
                        <Form.Item<FieldType>
                            label="用户名"
                            name="username"
                            rules={[
                                { required: true, message: '请输入用户名' },
                                { pattern:/^\w{3,8}$/,message:"用户名必须是3-8位数字字母组合"}
                            ]}
                        >
                            <Input prefix={<UserOutlined />} />
                        </Form.Item>

                        <Form.Item<FieldType>
                            label="密码"
                            name="password"
                            rules={[{ required: true, message: '请输入密码' }]}
                            >
                            <Input.Password prefix={<LockOutlined />} />
                        </Form.Item>

                        {/* <Form.Item<FieldType> name="remember" valuePropName="checked" label={null}>
                        <Checkbox>Remember me</Checkbox>
                        </Form.Item> */}

                        <Form.Item label={null} wrapperCol={{ offset: 8, span: 16}}>
                            <Button type="primary" loading={loading} htmlType="submit" style={{width:'100%'}} onClick={handleLogin}>
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        </div>
    </div>
}

export default Login